<template>
  <div style="display: flex;justify-content: center">
    <h1>采购信息查询</h1>
  </div>
  <div>
    <el-table :data="cutBean.records" style="width: 100%">
      <el-table-column prop="supplierBean.name" label="供应商名称"/>
      <el-table-column prop="buyer" label="采购员"/>
      <el-table-column prop="date" label="采购时间"/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button type="danger" @click="dialogVisible=true,show(scope.row)">查看采购详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
  </div>

  <!--    条件查询-->
  <div>
    <div>
      <div style="display: flex;justify-content: space-around;margin-top: 20px">
        <div style="width: 350px;">供应商:
          <el-input v-model="findObj.supplierName" style="width: 250px"/>
        </div>
        <div>起始日期
          <el-date-picker
              v-model="findObj.startDate"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </div>
        <div>结束日期
          <el-date-picker
              v-model="findObj.endDate"
              type="date"
              placeholder="选择日期"
              value-format="YYYY-MM-DD"
          />
        </div>
        <div>
          <el-button type="primary" @click="findByItem(1)">查询</el-button>
        </div>
      </div>

    </div>

    <!--查看详情弹出框-->
    <el-dialog
        v-model="dialogVisible"
        title="采购信息详情"
        width="50%"
    >
      <el-form
          ref="userForm"
          :model="infoObj"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
          style="width: 600px;"
      >
        <el-form-item label="供应商名称：" prop="">
          {{infoObj.supplierBean.name}}
        </el-form-item>
        <el-form-item label="采购员：" prop="">
          {{infoObj.buyer}}
        </el-form-item>
        <el-form-item label="采购时间：" prop="">
          {{infoObj.date}}
        </el-form-item>
        <el-form-item label="采购物品明细：" prop="">
          <el-table :data="buyerInfo.buyerInfoList" style="width: 80%">
            <el-table-column prop="product.name" label="商品名称"  />
            <el-table-column prop="product.brand" label="品牌" />
            <el-table-column prop="buyMoney" label="采购价" />
            <el-table-column prop="num" label="采购数量" />
          </el-table>
        </el-form-item>


      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "buyInfo",
  data(){
    return{
      cutBean: {},
      findObj:{},
      infoObj:{},
      dialogVisible: false,
      infoVisible:false,
      buyerInfo:{},
    }
  },
  methods:{
    findByItem(pageNO){
      this.findObj.pageNO=pageNO;
      axios.get("/project/buyer/findByItem",{
        params:{
          pageNO:this.findObj.pageNO,
          supplierName:this.findObj.supplierName,
          startDate:this.findObj.startDate,
          endDate:this.findObj.endDate,
        }
      }).then(resp=>{
        this.cutBean=resp.data;
      })
    },
    show(obj){
      this.infoVisible=true;
      this.infoObj=obj;
      axios.get("/project/buyer/findById",{
        params:{
          buyId:obj.id
        }
      }).then(resp=>{
        this.buyerInfo=resp.data
      })
    },


  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>